<template>
	<view class="hui b_width">
		<u-navbar leftIconColor="#fff" left-text="故障反馈" :autoBack="true" title=" " titleStyle="color:#fff"
			:placeholder="true" bgColor="#3C7CFF">
		</u-navbar>
		<view class="back_box">
			<view class="yuan"></view>
			<image class="back" src="@/static/img/user/back.png" mode="widthFix"></image>
		</view>
		<view class="list_box">
			<view class="box">
				<view class="b_flex_c">
					<view class="xian"></view>
					<view class="name">设备离线</view>
				</view>
				<view class="b_flex_c_s i_box b_border_b">
					<view>设备编号</view>
					<input v-model="params.deviceNumber" placeholder="请输入设备编号" placeholder-style="color:#9296AF;font-size:28rpx" />
					<view class="sao_box b_flex_cc" @click="sao()">
						<image class="sao" src="@/static/img/user/sao.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="xuan_box b_flex_c_s">
					<view>请选择您遇到的问题</view>
					<view class="b_flex_c" @click="show=true">
						<view v-if="wt" class="b_blue wt">{{wt}}</view>
						<view v-else class="b_grey wt">请选择</view>
						<image class="right" src="@/static/img/user/right.png" mode="widthFix"></image>
					</view>
				</view>
				<u--textarea v-model="params.remarks" height="150" placeholderStyle="color:#9296AF" placeholder="请输入问题描述" count :maxlength="200"></u--textarea>
			</view>
			<view class="box">
				<view class="tu b_border_b">现场图片</view>
				<view class="upload_box">
						<u-upload @afterRead="afterRead"  :fileList="params.images" @delete="deleteImg" :previewImage='true' :previewFullImage="true">
							 <view class="b_flex_c">
								<view class="u_box b_flex_cc">
									<image class="jia" src="@/static/img/user/jia.png" mode="widthFix"></image>
								</view>
								<view class="text">
									<view>上传照片</view>
									<view>有助于我们更快解决问题</view>
								</view>
							</view> 
					    </u-upload>
				</view>
			</view>
			<view class="yes_button" @click="submit">确定</view>
		</view>
		<u-popup :closeOnClickOverlay="true" :show="show" mode="bottom" :round="35" @close="show=false">
		        <u-radio-group v-model="check" size="20" active-color="#3C7CFF">
				<view class="wt_box">
					<view :class="[index+1<wtList.length?'b_border_b':'', 'wt_info','b_flex_c' ]" v-for="(item,index) in wtList" :key="index">
						<view class="radio">
							<u-radio icon-size="12" :name="index" ></u-radio>
						</view>
						<view>{{item.name}}</view>
					</view>
					<view class="ks_button" @click="yes()">确定</view>
					<view class="qx_button" @click="no()">取消</view>
				</view>
				</u-radio-group>
		</u-popup>
	</view>
</template>

<script>
	import {
		uploadFile,
		feedbackType,
		feedbackSave
	} from "@/require/api.js";
	export default{
		data(){
			return{
				
				params:{
				   deviceNumber:'',
				   remarks:'',
				   images:[],
				   typeId:''
				},
				wt:'',
				check:'',
				show:false,
				wtList:[
					{id:1,name:'无法开锁'},
					{id:2,name:'无法关锁'},
					{id:3,name:'结算异常'}
				]
			}
		},
		onShow() {
			this.getType();
		},
		methods:{
		 	async getType(){
				let {data}=await feedbackType();
				this.wtList=data;
			},
			yes(){
				if(this.check===''){
					return this.$project.toast('请选择');
				}
				let item=this.wtList[this.check];
				this.params.typeId=item.id;
				this.wt=item.name;
				this.show=false;
			},
			no(){
				this.params.wt='';
				this.show=false;
			},
		 	async submit(){
				if(!this.params.deviceNumber) return this.$project.toast('请输入设备编号');
				if(!this.params.typeId) return this.$project.toast('请选择遇到的问题');
			
				let params=JSON.parse(JSON.stringify(this.params));
				
				let img=[];
				 
				params.images.forEach(res=>{
					img.push(res.url);
				});
				
				params.images=img.toString(',');
				
				let {code}=await feedbackSave(params);
				
				if(code==200){
					this.$project.toast('已提交');
					
					setTimeout(()=>{
						this.$project.toBack();
					},500)
					
					
				}
				
			},
			sao(){
				let _=this;
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						let data=res.result.split('?deviceNumber=');
						_.params.deviceNumber=data[data.length-1];
					}
				})
			},
			async afterRead(event) {
				const data = JSON.parse(await uploadFile(event.file.url, {
					model: 'wechat',
					pid: '8'
				}));
				this.params.images.push({url:data.data.url});
				
			},
			deleteImg(e){
				 this.params.images.splice(e.index,1);
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-textarea{
		background-color: #F5F5F5 !important;
	}
	::v-deep .u-textarea__count{
		background-color: #F5F5F5 !important;
		color: #9296AF !important;
	}
	.back_box{
		width: 100%;
		background-color: #3C7CFF;
		height: 300rpx;
		display: flex;
		justify-content: flex-end;
		box-sizing: border-box;
		padding: 0 30rpx 0 0;
	}
	.yuan{
		width: 350rpx;
		height: 350rpx;
		background: linear-gradient(#5088FB,#3C7CFF);
		border-radius: 50%;
		position: absolute;
		right:-50rpx;
		top: -50rpx;
		z-index: 99;
	}
	.back{
		width: 200rpx;
	    z-index: 100;
	}
	.list_box{
		position: relative;
		top:-82rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		z-index: 110;
	}
	.box{
		background-color: #fff;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 30rpx;
		color: #252B50;
		margin-bottom: 30rpx;
	}
	.xian{
		width: 8rpx;
		height: 40rpx;
		border-radius: 15rpx;
		background-color: #3C7CFF;
		margin-right: 10rpx;
	}
	.name{
		font-weight: bold;
	}
	.sao_box{
		width: 50rpx;
		height: 50rpx;
		border-radius: 15rpx;
		background-color: #3C7CFF;
	}
	.sao{
		width: 32rpx;
	}
	.i_box{
		box-sizing: border-box;
		padding: 60rpx 0 30rpx 0;
	}
	.xuan_box{
		box-sizing: border-box;
		padding: 50rpx 0;
	}
	.right{
		width: 14.5rpx;
	}
	.wt{
		font-size: 28rpx;
		margin-right: 10rpx;
		font-weight: 500;
	}
	.tu{
		box-sizing: border-box;
		padding: 0 0 20rpx 0;
	}
	.upload_box{
		box-sizing: border-box;
		padding: 20rpx 0;
	}
	.u_box{
		width: 100rpx;
		height: 100rpx;
		
		border: 1px solid #F1F1F1;
		border-radius: 4px;
	}
	.jia{
		width: 25rpx;
	}
	.text{
		color: #9296AF;
		margin-left: 20rpx;
		font-size: 26rpx;
	}
	.yes_button{
		background-color: #3C7CFF;
		color: #fff;
		border-radius: 50rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align:center;
		margin-top: 100rpx;
	}
	.wt_box{
		box-sizing: border-box;
		padding: 20rpx 50rpx;
		width: 100%;
	}
	.wt_info{
		box-sizing: border-box;
		padding: 30rpx 0;
		width: 100%;
	}
	.ks_button {
		background-color: #3C7CFF;
		text-align: center;
		width: 80%;
		margin: 50rpx auto 40rpx auto;
		color: #fff;
		border-radius: 35rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.qx_button {
		background-color: #fff;
		text-align: center;
		width: 80%;
		margin: 10rpx auto 40rpx auto;
		color: #9296AF;
		border-radius: 35rpx;
		height: 78rpx;
		line-height: 78rpx;
		border: 1rpx solid #3C7CFF;
	}
</style>